import React from "react";
import "./Middle.css"
// 1.导入验证约束 props的库
import PropTypes from "prop-types"
export default class Middle extends React.Component{
    
    // 2. 向 类 添加一个 静态属性   static 
    //静态属性名 只能叫 propTypes
    //  isRequired 必须传递
    //验证约束传递的数据类型：   array  number  string  object   func
    static propTypes = {
        middleArr: PropTypes.array.isRequired,
        num:PropTypes.number.isRequired,
        str:PropTypes.string.isRequired,
        changeMiddle:PropTypes.func.isRequired
    }

    //约束 默认值
    static defaultProps = {
        num:123,
        str:"我是middle组件中的默认数据"
    }

    render(){
        //props  接受父组件传递的数据
        // console.log("@@@",this.props);
        //解构赋值
        let {middleArr,num,str,changeMiddle} = this.props;

        return <div className="middle">
            <ul>
              
                {
                   middleArr.map((item,index)=>{
                        return  (
                            <li onClick={changeMiddle(index)} key={index}>
                                <h3>{item.title}</h3>
                                {
                                    item.bol ?  <h4>{item.position}</h4> : null
                                }
                               
                            </li>
                        )
                    })
                }
               
                
            </ul>


        </div>
    }
}